<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <title>Document</title>
  <style>
    body {
      background: url('background/background-login.png') no-repeat;
      background-size: cover;
    }
    @keyframes slide-in-up {
      from {
        transform: translateY(100%);
        opacity: 0;
      }
      to {
        transform: translateY(0);
        opacity: 1;
      }
    }
    #login_box {
      width: 30%;
      height: 450px;
      background-color: rgb(255, 255, 255,0.38);
      margin: auto;
      margin-top: 10%;
      text-align: center;
      border-radius: 10px;
      padding: 50px 50px;
      animation: slide-in-up 0.5s ease-in-out forwards;
    }

    h2 {
      color: #ffffff90;
      margin-top: 5%;
    }

    h3 {
      color: whitesmoke;
    }
    #input-box {
      margin-top: 5%;
    }

    span {
      color: #fff;
    }

    input {
      border: 0;
      width: 60%;
      font-size: 15px;
      color: #fff;
      background: transparent;
      border-bottom: 2px solid #fff;
      padding: 5px 10px;
      outline: none;
      margin-top: 10px;
    }

    button {
      margin-top: 50px;
      width: 60%;
      height: 30px;
      border-radius: 10px;
      border: 0;
      color: #fff;
      text-align: center;
      line-height: 30px;
      font-size: 15px;
      background-image: linear-gradient(to right, #40fff8, #b6ff7d);
    }
    button:hover {
      background-image: linear-gradient(to right, rgba(43, 255, 247, 0.45), #40fff8);
      color: #868c8c;
    }
    input::placeholder {
      color: #948f8f;
    }
    #sign_up {
      margin-top: 45%;
      margin-left: 60%;
    }

    a {
      color: #b94648;
    }
    ::placeholder
    {
      color: beige;
    }


    input[type="file"] {
      border: 1px solid transparent;
    }
  </style>
</head>

<body>
<div id="login_box">
  <h2>REGISTER</h2>
  <form id="registerForm">
    <div class="input_box">
      <label>
        <input type="text" placeholder="请输入用户名" name="user">
      </label>
    </div>
    <div class="register_box">
      <label>
        <input type="password" placeholder="请输入密码" name="pwd">
      </label>
      <label>
        <input type="text" placeholder="请输入您的密保问题（用于找回密码）" name="question">
      </label>
    </div>
    <div class="input_box">
      <label>
        <input type="text" placeholder="请输入您的密保问题的答案" name="answer">
      </label>

    </div>
    <br>
    <div style="text-align: left; color: whitesmoke">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;请在下方上传您的头像</div>
    <input
            type="file"
            accept="image/*"
            id="avatarInput"
            name="avatarInput"
            class="fileInput"
    />
    <button type="button" id="btn_register">注册</button>
    <br><br>
    <h3>注册好了？<a href="login.html">点此返回</a>！<a href="changepwd.html">修改密码</a></h3>
  </form>
</div>
<p id="err_msg"></p>
<script>

  $("#back").click(function () {
    location.href = "login.html";
  });


  const form = document.getElementById('registerForm');
  const avatarInput = document.getElementById('avatarInput');
  const registerButton = document.getElementById('btn_register');

  registerButton.addEventListener('click', e => {
    e.preventDefault();
    const formData = new FormData(form);
    formData.append('avatar', avatarInput.files[0]);

    fetch('/toRegister', {
      method: 'POST',
      body: formData
    })
            .then(response => {
              if (response.ok) {
                // 处理服务器的响应
                return response.json(); // 解析响应为 JSON 对象
              } else {

                throw new Error('提交失败');
              }
            })
            .then(data => {
              alert(data.message);
              console.log('提交成功：', data); // 打印响应数据
            })
            .catch(error => {
              alert(error.message);
              console.error(error);
            });
  });

</script>
</body>
</html>


